<!-- 上架到库位的组件 -->
<template>
  <div class="container">
    <el-form :inline="true" :model="formData" class="demo-form-inline" label-width="100px" size="medium">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="库房">
            <el-select v-model="formData.repositoryId" placeholder="请选择库房">
              <el-option @click.native="changeHouse(item.value)" v-for="item in houseList" :key="item.value"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择库位" v-show="positionName">
            <h4 style="color: #007bff">{{ positionName }}</h4>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <choiceCabinet ref="choiceCabinet" :data="data" :cabinetList="cabinetList"></choiceCabinet>
  </div>
</template>

<script>
import { dropDown } from '@/api/bas/repository.js'
import { pagedeviceCabinetList } from '@/api/bas/cabinet.js'
import { virtualRepositoryCabinet, cabinetTree, allCabinet } from '@/api/rfid/virtualRepository'
import choiceCabinet from '@/components/choiceCabinet.vue'
// import { EventBus } from '@/utils/EventBus'

export default {
  name: 'upToPosition',
  components: {
    choiceCabinet,
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      formData: {},
      houseList: [], // 库房的数据
      cabinetList: [], // 密集架的数据
      columnList: [], // 列的数据
      colItem: {},
      positionName: '', // 库位名称
      upItemWidth: 0,
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.getHouseList()
    // EventBus.$on('submitPostion', (param) => {
    //   // 使用参数
    //   this.positionName = param.positionName
    // })
  },
  methods: {
    // 获取库房的数据
    getHouseList() {
      dropDown()
        .then((res) => {
          if (res.data.code == 200) {
            this.houseList = res.data.data
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 库房选择事件
    changeHouse(id) {
      if (id) {
        this.getAllCabinet(id)
        this.$refs.choiceCabinet.openDialog()
      }
      this.$forceUpdate()
    },
    // 获取所有的装具
    getAllCabinet(repositoryId) {
      allCabinet(repositoryId).then((res) => {
        if (res.data.code == 200) {
          this.cabinetList = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取密集架的数据
    getCabinetList(id) {
      pagedeviceCabinetList({ repositoryId: id })
        .then((res) => {
          if (res.data.code == 200) {
            this.cabinetList = res.data.data
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 获取列的数据
    getColumnList(id) {
      virtualRepositoryCabinet(id)
        .then((res) => {
          if (res.data.code == 200) {
            this.columnList = res.data.data.children
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 库房选择事件
    houseChange() {
      this.formData.deviceId = ''
      this.getCabinetList()
    },
    // 密集架选择事件
    changeCabinet(id) {
      this.formData.colId = ''
      this.columnList.length = 0
      this.getColumnList(id)
    },
    getTotalWidth(arr) {
      let totalWidth = 0
      arr.forEach((item) => {
        totalWidth += Number(item.boxWidth)
      })
      return totalWidth
    },
    // 获取列的详情
    getColumnInfo(row) {
      this.colItem = this.columnList.filter((x) => x.colId == row)[0]
      // 将所有的盒宽相加
      this.upItemWidth = this.getTotalWidth(this.data)
      this.$refs.colDetails.show()
    },
    // 清空表单
    clearForm() {
      this.formData.repositoryId = ''
      this.positionName = ''
    },
  },
}
</script>
<style lang="less" scoped>
.el-form--inline .el-form-item {
  margin-right: 0;
  display: flex;
}
</style>
